<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            overflow: hidden;
            position: relative;
            margin: 200px auto;
            height: 155px;
            background-color: antiquewhite;
        }
        
        img {
            vertical-align: middle;
            height: 178px;
            width: 1950px;
            position: absolute;
            /* transition: all .1s ease-in; */
        }
        
        #img1 {
            /* filter: blur(4px); */
            z-index: 1;
        }
        
        #img2 {
            z-index: 1;
            bottom: 4px;
        }
        
        #img3 {
            z-index: 1;
            right: -205px;
        }
        
        #img4 {
            filter: blur(4px);
            z-index: 4;
            left: -150px;
        }
        
        #img5 {
            filter: blur(4px);
            z-index: 2;
            left: -150px;
        }
        
        #img6 {
            filter: blur(4px);
            z-index: 1;
            left: -150px;
            bottom: -4px;
        }
    </style>

</head>

<body>
    <img style="display: none;" src="B-images/ddad7c909e4c2cf933473e971373d825e6f06519.png">
    <img style="display: none;" src="B-images/173eafe211b4671e5aff059a1834f3e4579c7a5d.png">

    <div class="box">

        <img id="img1" src="B-images/8e084d67aa18ed9c42dce043e06e16b79cbb50ef.png">
        <img id="img2" src="B-images/dbd5c17c4315714de9e4ee119694d2e9efaf9639.png">
        <img id="img3" src="B-images/082e39ef757826401ef82da818310d42e05bc2de.png">
        <img id="img4" src="B-images/88537437a7916ecde847fa46652b44fbd3cbbb06.png">
        <img id="img5" src="B-images/37d9a93baa55870506a6f3e6308e7a0c386b97c7.png">
        <img id="img6" src="B-images/cd9be0a2716adbae85fd899259381c4b2c2893c7.png">
    </div>



</body>
<script>
    var img3 = document.getElementById('img3');

    function start() {
        setTimeout(function s1() {
            img3.src = 'B-images/ddad7c909e4c2cf933473e971373d825e6f06519.png';
            setTimeout(function s2() {
                img3.src = 'B-images/173eafe211b4671e5aff059a1834f3e4579c7a5d.png';
                setTimeout(function s3() {
                    img3.src = 'B-images/082e39ef757826401ef82da818310d42e05bc2de.png';
                }, 50);
            }, 50);
        }, 50);

    }
    start();
    setInterval(start, 2000);
    var box = document.getElementsByClassName('box');
    var img2 = document.getElementById('img2');
    var img1 = document.getElementById('img1');

    var img4 = document.getElementById('img4');
    var img5 = document.getElementById('img5');
    var img6 = document.getElementById('img6');

    var mohu = 0;
    var sta = 4;
    var img3sta = 0;

    var endflagX = 0;
    var flagX = 0;
    var yd26 = 0;
    var endyd26 = 4;
    var endimg3sta = 0;

    var img2blur = 0;
    var endimg2blur = 0;


    var img3blur = 0;
    var endimg3blur = 0;
    box[0].addEventListener('mousemove', function(e) {
        img4.style.transition = 'none';
        img5.style.transition = 'none';
        img6.style.transition = 'none';
        if (e.movementX > 0) {
            img2.style = 'filter: blur(' + img2blur + 'px);';
            img4.style = 'filter: blur(' + sta + 'px);';
            img5.style = 'filter: blur(' + sta + 'px);';
            img6.style = 'filter: blur(' + sta + 'px);';
            img3.style = 'filter: blur(' + img3blur + 'px);';
            img1.style = 'filter: blur(' + img3blur + 'px);';
            img2.style.transform = 'translateX(' + yd26 + 'px' + ')';
            img4.style.transform = 'translateX(' + flagX + 'px' + ')';
            img5.style.transform = 'translateX(' + flagX + 'px' + ')';
            img6.style.transform = 'translateX(' + yd26 + 'px' + ')';
            img3.style.transform = 'translateX(' + img3sta + 'px' + ')';
            flagX = flagX + 2;
            yd26 = yd26 + 1;
            if (sta > 0) {
                sta = sta - 0.08;
            } else {
                sta = 0;
            }
            if (img3sta < 10) {
                img3sta = img3sta + 0.025;
            } else {
                img3sta = 10;
            }
            if (img2blur < 6) {
                img2blur = img2blur + 0.3;
            } else {
                img2blur = 6;
            }
            if (img3blur < 6) {
                img3blur = img3blur + 0.15;
            } else {
                img3blur = 6;
            }
            endyd26 = yd26;
            endimg3sta = 0;
            mohu = sta;
            endflagX = flagX;
            endimg2blur = img2blur;
            endimg3blur = img3blur;

        } else if (e.movementX < 0) {
            img2.style = 'filter: blur(' + endimg2blur + 'px);';
            img4.style = 'filter: blur(' + mohu + 'px);';
            img5.style = 'filter: blur(' + mohu + 'px);';
            img6.style = 'filter: blur(' + mohu + 'px);';
            img3.style = 'filter: blur(' + endimg3blur + 'px);';
            img1.style = 'filter: blur(' + endimg3blur + 'px);';
            img2.style.transform = 'translateX(' + endyd26 + 'px' + ')';
            img4.style.transform = 'translateX(' + endflagX + 'px' + ')';
            img5.style.transform = 'translateX(' + endflagX + 'px' + ')';
            img6.style.transform = 'translateX(' + endyd26 + 'px' + ')';
            img3.style.transform = 'translateX(' + (-endimg3sta) + 'px' + ')';
            if (endimg3sta < 10) {
                endimg3sta = endimg3sta + 0.025;
            } else {
                endimg3sta = 10;
            }
            endflagX = endflagX - 2;
            endyd26 = endyd26 - 1;
            if (mohu < 4) {
                mohu = mohu + 0.08;
            } else {
                mohu = 4;
            }

            if (endimg2blur > 0) {
                endimg2blur = endimg2blur - 0.15;
            } else {
                endimg2blur = 0;
            }
            if (endimg3blur > 0) {
                endimg3blur = endimg3blur - 0.15;
            } else {
                endimg3blur = 0;
            }
            sta = mohu;
            img3sta = 0;
            flagX = endflagX;
            yd26 = endyd26;
            img3blur = endimg3blur;
            img2blur = endimg2blur;

        }
    });
    box[0].addEventListener('mouseleave', function(e) {
        img3.style = 'filter: blur(' + 0 + 'px);';
        img1.style = 'filter: blur(' + 0 + 'px);';
        img2.style = 'filter: blur(' + 0 + 'px);';
        img4.style = 'filter: blur(' + 4 + 'px);';
        img5.style = 'filter: blur(' + 4 + 'px);';
        img6.style = 'filter: blur(' + 4 + 'px);';
        img1.style.transition = 'all .6s ease-in';
        img2.style.transition = 'all 1.6s ease-in';
        img3.style.transition = 'all 1s ease-in';
        img4.style.transition = 'all .7s ease-in';
        img5.style.transition = 'all .9s ease-in';
        img6.style.transition = 'all 1s ease-in';

        img3.style.transform = 'translateX(' + 0 + 'px' + ')';
        img2.style.transform = 'translateX(' + 0 + 'px' + ')';
        img4.style.transform = 'translateX(' + 0 + 'px' + ')';
        img5.style.transform = 'translateX(' + 0 + 'px' + ')';
        img6.style.transform = 'translateX(' + 0 + 'px' + ')';
        mohu = 0;
        sta = 4;
        img3sta = 0;

        endflagX = 0;
        flagX = 0;
        yd26 = 0;
        endyd26 = 4;
        endimg3sta = 0;

        img3blur = 0;
        endimg3blur = 0;
    });

    // window.addEventListener('mouseleave')

    // window.addEventListener('mousemove', function(e) {
    //     if (e.pageX > e.pageX) {

    //     }

    //     img4.style.left = '20px';
    //     img5.style.left = '20px';
    //     img6.style.left = '20px';

    // });
</script>

</html>